<script setup lang="ts">
import {useRouter} from "vue-router";
import {ref} from "vue";
import type {FormInst, FormItemInst, FormItemRule, FormRules} from "naive-ui";
import {UserApi} from "@/api/cloud/user.ts";
import {cloud} from "@/api/dto";
import type {FormItemValidateOptions} from "naive-ui/es/form/src/interface";

const router = useRouter();
const formRef = ref<FormInst>()
const rePasswordRef = ref<FormItemInst>()

const formValue = ref<cloud.LoginReq>(cloud.DefaultValue.Login)
const size = ref<'small' | 'medium' | 'large'>('medium')

const handlePasswordInput = () => {
    if (formValue.value.rePassword) {
        // 自定义规则 	触发方式 trigger
        const aa = {trigger: "password-input"} as FormItemValidateOptions
        if (rePasswordRef.value) {
            rePasswordRef.value.validate(aa);
        }
    }
}
const LoginApi = UserApi.Login(formValue.value).then(resp => {


})

//================
const rules = ref<FormRules>({
    email: {
        required: true,
        message: '请输入姓名',
        trigger: 'blur'
    },
    password: {
        required: true,
        message: '请输入年龄',
    },
    rePassword: [
        {
            required: true,
            validator: (
                rule: FormItemRule,
                value: string
            ) => {
                return value?.length > 0
            },
            message: '请再次输入密码',
            trigger: ['focus'],
        }, {
            validator: (
                rule: FormItemRule,
                value: string
            ): boolean => {
                let password = formValue.value.password;
                return password.length > value.length && password.startsWith(value)
            },
            message: '两次密码输入不一致',
            trigger: 'input'
        }, {
            validator: (rule: FormItemRule, value: string): boolean => {
                console.log(value)
                return formValue.value.password == value
            },
            message: '两次密码最终不一致',
            trigger: ['blur', 'password-input']
        }
    ]

})

</script>

<template lang="pug">
NForm(
    inline
    :ref="formRef"
    :label-width="80"
    :model="formValue"
    :rules="rules"
    :size="size"
)
    NFormItem(label="Email" path="email")
        NInput(
            v-model:value="formValue.email"
            autocomplete
            placeholder="Email"
            @keydown.enter.prevent
        )
    NFormItem(label="Password" path="password")
        NInput(
            v-model:value="formValue.password"
            type="password"
            @input="handlePasswordInput"
            placeholder="Password"
            autocomplete
            @keydown.enter.prevent
        )
    NFormItem(
        ref="rePasswordRef"
        first
        path="rePassword"
        label="重复密码"
    )
        NInput(
            v-model:value="formValue.rePassword"
            :disabled="!formValue.password"
            type="password"
            @keydown.enter.prevent
        )
    NButton(
        :disabled="formValue.email.length<1"
        round
        type="primary"
    )  验证

</template>

<style scoped lang="scss">
.dashboard {
    max-width: 80%;
}
</style>